ReactNative Expo 環境別設定（機密情報の設定も一緒に）
要件
hr.icon
1. dev, prdの2つの環境でビルド時に利用する環境変数を分けたい
2. dev, prdの2つの環境でビルド時に利用するapp.jsonの一部値を変えたい（ex: バンドルIDやアプリ名）
3. dev, prdの2つの環境でビルド時に利用する機密情報を分けたい、管理したい
戦術
hr.icon
考え方
app.config.tsを中心に、環境ごとにapp.jsonの設定値とアプリに与える環境変数を振り分ける。
方法
.env.development, .env.productionを作成
code: .env.development
ENV=devlopment
HOGE=aaaaaaa
package.jsonを変更
code: package.json
"scripts": {
...
"run:ios:dev": "cp .env.development .env.local && expo prebuild && expo run:ios",
"build:ios": "cp .env.production .env.local && eas build --platform ios"
},
eas.jsonのenvには何も与えない。
.envでコントロールする。
app.config.ts
code: app.config.ts
import { ExpoConfig, ConfigContext } from "expo/config";
const BUNDLE_IDENTIFIER = "com.setuyaku-kakeibo.www";
const APP_NAME = "せつやく家計簿";
export default ({ config }: ConfigContext): ExpoConfig => {
let dynamicConfig;
if (process.env.ENV === "production") {
dynamicConfig = {
name: APP_NAME,
ios: {
...config.ios,
bundleIdentifier: BUNDLE_IDENTIFIER,
},
};
} else {
dynamicConfig = {
name: dev.${APP_NAME},
ios: {
...config.ios,
bundleIdentifier: ${BUNDLE_IDENTIFIER}.dev,
},
};
}
return {
...config,
slug: "sample",
...dynamicConfig,
extra: {
...config.extra,
HOGE: process.env.HOGE,
},
};
};
アプリ内での環境変数は、expoのConstantsを使う。
code: sample.ts
import Constants from 'expo-constants';
console.log(Constants.manifest.extra.HOGE);
終わり。
より良い方法が見つかり次第、ブラッシュアップしていく。
Input
hr.icon
環境変数
The Expo CLI will automatically load environment variables with an EXPO_PUBLIC_ prefix from .env files for use within your JavaScript code whenever you use the Expo CLI, such as when running npx expo start to start your app in local development mode.
つまり、Expoを起動するときに、.envファイルからEXPO_PUBLIC_とプレフィックスのついた環境変数を読み込むとのこと。
なお、.env.???系のファイルも優先順位を元に読み込める。
以下を参考にせよ。
app.json
Expoのprebuild、Expo Goの読み込みなどで使われるやつ。
様々な設定プロパティを使えるから、知っておくこと
これは静的な設定であり、動的に変えたい場合は、app.config.js, app.config.tsを使う。
なお、app.jsonのextraにて、環境変数っぽいものが使える。
code: sample.js
import Constants from 'expo-constants';
Constants.expoConfig.extra.fact === 'kittens are cool';
こんな感じで使えまっせ。
app.config.js
動的に構成値を変化させたい時に使う
重要
app.jsonが読み込まれた後に、app.config.jsが読み込まれる
code: app.config.js
module.exports = ({ config }) => {
console.log(config.name); // prints 'My App'
return {
...config,
};
};
app.config.ts
Typescriptでかけるapp.config.js。
これがある場合は、こっちが優先で評価される。
環境に応じて構成値を切り替える
code: app.config.js
module.exports = () => {
if (process.env.MY_ENVIRONMENT === 'production') {
return {
/* your production config */
};
} else {
return {
/* your development config */
};
}
};
eas.json
EAS自体がビルドの際に使われるもので、expo runやexpo startとは別もの。
profileという形でビルド構成を分けることができて、開発用、配布用とかの環境変数も別々に管理できる。
code: eas.json
{
"build": {
"production": {
"node": "16.13.0",
"env": {
}
},
"preview": {
"extends": "production",
"distribution": "internal",
"env": {
}
}
}
}